<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-17 18:23:45
 * @LastEditTime: 2022-03-31 10:43:25
-->
<template>
	<div class="nav-tab">
        <div class="tab-box">
            <div v-for="(item, i) in tabList" :key="i" class="item-tab">
                <i v-if="item.check" class="tab-item-icon"><el-icon><Select color="#ffffff"/></el-icon></i>
                <i v-else :class="activeSign == item.activeSign ? 'active-check' : 'item-tab-icon'"><span>{{item.id}}</span></i>
                <div :class="activeSign == item.activeSign ? 'active-name' : 'item-name'">{{item.name}}</div>
                <span class="hr-style" v-if="(tabList.length - i !=1)"></span>
            </div>
        </div>
        <div class="renzheng-content">
            <component :is="componentMap[activeSign]" @selectActiveSign="selectActiveSign"  :type="newType" :companyName="newCompanyName" :status="newStatus" :formData="newFormData"></component>
        </div>
	</div>
</template>
<script setup lang="ts">
import { getAppspaceCompany } from '@/ajax/index';
import { ComponentInternalInstance } from 'vue';
import { useStore } from 'vuex';
import componentMap from '../index.js'; // 函数化组件

	const store = useStore();
	const { appContext } = getCurrentInstance() as ComponentInternalInstance;
    const activeSign =  ref(`Information`);
    const newType = ref('')
    const newCompanyName = ref('')
    const newStatus = ref('')
    const userInfo = computed(() => store.state.user.userInfo);

    const newFormData = reactive({
		'companyName': ``,
		'creditNo': ``,
        'licenseNo':``,
        'juridicalPerson':``,
        'juridicalPersonIdcard': ``,

        'bankName': ``,
		'bankNo': ``,
        'openingBankName': ``,
        'id': ``
        
	});
    const tabList = reactive([
        {
            id: 1,
            activeSign: 'Information',
            name: '填写基本信息',
            check: false,
        },
        {
            id: 2,
            activeSign: 'PublicInfo',
            name: '填写对公信息',
            check: false,
        },
        {
            id: 3,
            activeSign: 'SubmitInfo',
            name: '提交认证',
            check: false,
        },
        {
            id: 4,
            activeSign: 'SuccessInfo',
            name: '认证完成',
            check: false,
        },
    ]) 
    const selectActiveSign = (val:string, type:string, companyName:string, status:string, formData: Object)=>{
        activeSign.value = val
        let res: any = tabList.find((itemTab: any)=>{
            return itemTab.activeSign == val
        })
        tabList.forEach(item => {
            if( type == 'next' && res.id > item.id){
                item.check  = true
            }else if(type == 'back' && res.id  ==  item.id){
                item.check  = false
            }
        });
        newType.value = type
        newCompanyName.value = companyName
        newStatus.value = status
        Object.assign(newFormData, formData)

        
    }
     //获取企业实名信息
    const getCompanyInfo= async(companyId: string)=>{
        try {
            const res = await getAppspaceCompany({id: companyId});
            Object.assign(newFormData, res.content)
            console.log(newFormData,"{newFormData}");
            
        } catch (error) {
        }
    }
    //获取选中的
    const getSelectTab=() =>{
        tabList.forEach(item => {
            if(item.id < 3){
                item.check  = true
            }
        });
        activeSign.value = 'SubmitInfo'
    }
    
    const getAllSelectTab = () => {
        tabList.forEach(item => {
            item.check  = true
        });
        activeSign.value = 'SuccessInfo'
    }
    const createdFn = () => {
        // const companyId = store.state.user.userInfo.companyId
        const companyId = userInfo.value.companyId
        const status = userInfo.value.status
        if(companyId){
            getCompanyInfo(companyId)
        }
        if(companyId && !status){
            getSelectTab()  // 如果有companyId，直接进第二步
        }else if(companyId && status){
            getAllSelectTab() //实名认证成功
        }
    };

    watch(()=>userInfo.value,()=>{
        if( userInfo.value){
            createdFn();
        }
    },{immediate:true})

   
   
</script>
<style lang="scss" scoped>
	.nav-tab {
		@extend %relative;
      
        .tab-box{
            width: 1200px;
            margin: auto;
            margin-top: 30px;
            display: flex;
            justify-content: center;
            .item-tab{
                display: flex;
                align-items: center;
                color: #94979E;
            }
            .tab-item-icon{
                background-color: $project_them;
                display: inline-block;
                width: 18px;
                height: 18px;
                text-align: center;
                margin-right: 10px;
            }
           
            .hr-style{
                width: 120px;
                height: 0.5px;
                background-color: #C8C9CC;
                margin: 0 15px;
            }
            .item-tab-icon{
                border: 1px solid #E8EAEC;
                display: inline-block;
                width: 18px;
                height: 18px;
                text-align: center;
                margin-right: 10px;
                color: #94979E;
            }
          
            //为选中样式
            .item-box{
                color: #94979E;
                .tab-item{
                    border: 1px solid #E8EAEC;
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    text-align: center;
                    margin-right: 10px;
                    color: #94979E;
                }
            }
            //选中样式
            .item-box-active{
                color: #262626;
            }
             .active-check{
                background-color: #262626;
                display: inline-block;
                width: 18px;
                height: 18px;
                text-align: center;
                margin-right: 10px;
                span{
                    color: #fff;
                }
            }
            .active-name{
                color: #262626;
            }
        }
        .renzheng-content{
            width: 840px;
            margin: auto;
            padding-top: 30px;
        }
	}
</style>
